<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>defineProperty</title>
	<style type="text/css">
		#app {
		width: 500px;
		height: 500px;
		margin: 10px auto;
		background: pink;	
	}
	input {
		width: 60%;
		height: 30px;
		margin: 20px 20%;
	}

	</style>
</head>
<body>
<div id="app">
	<input type="text" value="">
	<h1 id="in"></h1>
</div>
</body>
<script type="text/javascript">
	
let input = document.getElementsByTagName('input')[0];
let p = document.getElementById('in');


let people = {};


Object.defineProperty(people, 'name', {
	get() {
		return input.value;
	},
	set(val) {
		p.innerText = val;
	}
})


input.addEventListener('keyup', function() {
	people.name = input.value;
	console.log(people.name);
})

</script>
</html>